<template>
    <div class="page-header">
        <h1 class="page-title">友情链接</h1>
        <img class="page-cover"
            src="https://static.ttkwsd.top/config/c8049b9b880411ebb6edd017c2d2eca2.jpg" alt="">
        <!-- 波浪 -->
        <Waves></Waves>
    </div>
    <div class="bg">
        <div class="page-container">
            <h2>
                <svg-icon class="flower" icon-class="flower" size="1.25rem" color="pink"></svg-icon> 本站信息
            </h2>
            <blockquote class="block">
                <p>名称：{{ blog.siteConfig.siteName }}</p>
                <p>简介：{{ blog.siteConfig.siteIntro }}</p>
                <p>头像：{{ blog.siteConfig.authorAvatar }}</p>
            </blockquote>
            <h2>
                <svg-icon class="flower" icon-class="flower" size="1.25rem" color="pink"></svg-icon> 申请方法
            </h2>
            <div class="welcome">需要交换友链的可在本页留言 (｡･∀･)ﾉﾞ</div>
            <blockquote class="block">
                <p>
                    出于信息需要,大佬你的信息格式要包含：网站名称、网站链接、头像链接、网站介绍、名称颜色
                </p>
            </blockquote>
            <h2>
                <svg-icon class="flower" icon-class="flower" size="1.25rem" color="pink"></svg-icon> 小伙伴们
            </h2>
            <div class="friends">
                <div class="friend-item" v-animate="['slideUpBigIn']" v-for="friend in friendList" :key="friend.id">
                    <a target="_blank" :href="friend.url">
                        <img class="image" v-lazy="friend.avatar" />
                    </a>
                    <div class="info">
                        <a class="name" target="_blank" :href="friend.url" :style="{ 'color': friend.color }">{{
                            friend.name
                        }}</a>
                        <p class="desc">{{ friend.introduction }}</p>
                    </div>
                </div>
            </div>
            <CommentList :comment-type="commentType"></CommentList>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getFriendList } from '@/api/friend';
import { Friend } from '@/api/friend/types';
import useStore from '@/store';
const { blog } = useStore();
const commentType = ref(2);
const friendList = ref<Friend[]>([]);
onMounted(() => {
    getFriendList().then(({ data }) => {
        friendList.value = data.data;
    })
})
</script>

<style lang="scss" scoped>
.block {
    line-height: 2;
    margin: 0 1.5rem;
    font-size: 15px;
    border-left: 0.2rem solid var(--color-purple);
    padding: 0.625rem 1rem;
    color: var(--grey-5);
    background: var(--color-pink-light);
    border-radius: 4px;
    word-wrap: break-word;
}

.welcome {
    position: relative;
    margin: 0 2.5rem 0.5rem;

    &::before {
        content: "";
        position: absolute;
        width: 0.4em;
        height: 0.4em;
        background: var(--primary-color);
        border-radius: 50%;
        top: 0.85em;
        left: -1em;
    }
}

.friends {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.friend-item {
    display: inline-flex;
    align-items: center;
    width: calc(50% - 2rem);
    margin: 1rem;
    padding: 0.5rem 1rem;
    line-height: 1.5;
    border-radius: 0.5rem;
    border: 0.0625rem solid var(--grey-2);
    box-shadow: 0 0.625rem 1.875rem -0.9375rem var(--box-bg-shadow);
    transition: all 0.2s ease-in-out 0s;
    animation-duration: 0.5s;
    visibility: hidden;

    &:hover {
        box-shadow: 0 0 2rem var(--box-bg-shadow);
    }

    .image {
        display: block;
        width: 4rem;
        height: 4rem;
        border-radius: .9375rem;
    }

    .info {
        padding-left: 1rem;
    }

    .name {
        font-weight: 700;
    }

    .desc {
        font-size: 0.75em;
        margin: 0.5rem 0;
    }
}

.flower {
    animation: rotate 6s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 767px) {
    .friend-item {
        width: calc(100% - 2rem);
    }
}
</style>